<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>班级管理</title>
<link rel="stylesheet" href="../static/layui/css/layui.css">
<style>    
  .layui-body{ padding: 10px;}
  .fen{margin:5px auto}
  .fenye{font-size:26px;}
</style>
</head>
<body>
	<br>
	<h2>班级管理</h2><br>

	<!-- 按钮区 -->
	<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
	  <button class="layui-btn">创建班级</button>
	  <button class="layui-btn">班级管理</button>
	  <button data-method="notice" class="layui-btn">导入学生</button>
	</div></br>

	<!-- 主体内容区 -->
	<hr/>
   <table class="layui-table">
	  <colgroup>
	    <col width="100">
	  </colgroup>
	 <thead>
	     <tr>
	        <th><input type="checkbox"/></th>
	        <th>班级名称</th><th>班级创建时间</th><th>班级描述</th><th>学生人数</th><th>班级状态</th><th>操作</th>
	     </tr>
     </thead>
     <tbody>
     
     </tbody>
   </table>
   
   <!-- 分页 -->
   <div id="paging"></div>
</body>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/layui/layui.js"></script>
<script type="text/javascript">
//分页日期格式
Date.prototype.Format = function (fmt) { //author: meizz
	  var o = {
	    "M+": this.getMonth() + 1, //月份
	    "d+": this.getDate(), //日
	    "h+": this.getHours(), //小时
	    "m+": this.getMinutes(), //分
	    "s+": this.getSeconds(), //秒
	    "q+": Math.floor((this.getMonth() + 3) / 3),
	    "S": this.getMilliseconds() //毫秒
	  };
	  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	  for (var k in o)
	  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	  return fmt;
}
//分页        	
layui.use('laypage', function(){
      var laypage = layui.laypage;
      $.get("/OnlineExam1/admin/class?m=count",function(data,status){
    	  console.log(data)
 		  n = data
      //执行一个laypage实例
      laypage.render({
        elem: 'paging' //注意，这里的 test1 是 ID，不用加 # 号
        ,count: n //数据总数，从服务端得到
        ,jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        
        $.get("http://localhost:8080/OnlineExam1/admin/class?m=page&p="+obj.curr,function(data,ststus){
            var tbody = $("tbody");
            tbody.empty();
            $.each($.parseJSON(data),function(index,value){
              var tr =$("<tr></tr>");
              var td1 =$( "<td></td>")
              var input =$("<input type='checkbox'>")
              var date = new Date(value.class_create)
              td1.append(input);
              tr.append(td1);
              tr.append($("<td>"+value.class_name+"</td>"));
              tr.append($("<td>"+JSON.stringify(date.Format("yyyy-MM-dd hh:mm:ss"))+"</td>"));
              tr.append($("<td>"+value.class_remark+"</td>"));
              tr.append($("<td><a id='state' href='/OnlineExam1/admin/student_class.jsp?classid="+value.class_id+"'>"+ value.count+ "</a></td>"));
			  if(value.class_state==1){
              		tr.append($("<td name='guan'>打开</td>"));
			  }else{
              		tr.append($("<td name='guan'>关闭</td>"));
			  }

              var td2=($("<td style='text-align: center;'></td>"))
              var button1=($("<button class='layui-btn layui-btn-warm'><a href='/OnlineExam1/admin/class?m=update&uid="+value.class_id+"' style='color: white;'>修改</a></button>"));
              var button2=($("<button class='layui-btn layui-btn-danger' id='btn_del' class_id='"+value.class_id+"'>删除</button>"));
              td2.append(button1)
              td2.append(button2)
              tr.append(td2)
              tbody.append(tr);
            })
          })

          console.log($("#btn_del"))
          $(document).on('click','#btn_del',function(){
            var id=$(this).attr("class_id")
            layer.confirm('确定要删除该班级吗?',{btn:['确定','取消'],title:'提示'},function(index){

            location.href="/OnlineExam1/admin/class?m=del&id="+id
            layer.close(index);
            })
          })
        //首次不执行
        if(!first){
          //do something
        }
      }
    });
  })
});
//关闭
$(function(){
	var g1=$('td[name="guan"]');
	console.log(g1+"-----");
	var i;
	for(i=0;i<g1.length;i++){
		if(g1[i].innerHTML.trim()=="关闭"){
			$(document).ready(function(){
				console.log($('#state')+"===");
				 $('#state').click(function(event){
				    return false;
				});
			});
		} 
	} 
	
});	
//导入文件
layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

	//触发事件
	  var active = {
	    notice: function(){
	      //示范一个公告层
	      layer.open({
	        type: 1
	        ,title: false //不显示标题栏
	        ,closeBtn: false
	        ,area: '500px;'
	        ,shade: 0.8
	        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
	        ,btn: ['下载模板', '关闭']
	        ,btnAlign: 'c'
	        ,moveType: 1 //拖拽模式，0或者1
	        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
		        '导入学生<br><br>操作说明<br>'+
		        '1、下载 Excel格式模板 文件，并按照模板格式填写。<br>'+
	        	'2、导入前请仔细核对Excel数据的正确性。<br>'+
	        	'<br>批量导入<br>'+
	        	'<form action="../upload" method="post"  enctype="multipart/form-data">'+
	  	                   '<input type="file" name="stufile" />'+
	  	                   '<input type="submit" value="批量导入" />'+
	  				'</form></div>'
	
	        ,success: function(layero){
	          var btn = layero.find('.layui-layer-btn');
	          btn.find('.layui-layer-btn0').attr({
	            href: 'http://localhost:8080/OnlineExam1/excel'
	            ,target: '_black'
	          });
	        }
	      });
	    }
	  };
	  //点击导入excel表格
	  $('#layerDemo .layui-btn').on('click', function(){
	    var othis = $(this), method = othis.data('method');
	    active[method] ? active[method].call(this, othis) : '';
	  }); 
});
//按钮切换
$(function(){
    $("button:eq(0)").click(function(){
    	window.location.href='create_class.jsp'
    });

    $("button:eq(1)").click(function(){
    	window.location.href='http://localhost:8080/OnlineExam1/admin/class_manage.jsp'
    }); 
});
</script>
</html>